<template>
	<div class="loginForm">
		<el-form :rules="rules" :model="userForm" ref="userForm">
			<el-form-item label="登录名称" prop="username">
				<el-input v-model="userForm.username"></el-input>
			</el-form-item>
			<el-form-item label="登录密码" prop="password">
				<el-input type="password" v-model="userForm.password"></el-input>
			</el-form-item>
		</el-form>
		<el-button type="primary" @click="login('userForm')">登录</el-button>
	</div>
</template>

<script>
	export default {
		data(){
			return {
				userForm:{
					username:'admin',
					password:'admin'
				},
				rules:{
					username:[
						 { required: true, message: '请输入用户名称', trigger: 'blur' }
					],
					password:[
						{ required: true, message: '请输入登录密码', trigger: 'blur' },
						{ min:3,max:16,message:"密码要求在3到16之间" }
					]
				}
			}
		},
		methods:{
			login(userForm){
				/* console.log(this.userForm);
				if(this.userForm.username==null){
					this.$message({message:"用户名称不能为空",type:"warm"})
					return;
				} */
				this.$refs[userForm].validate((valid) => {
				  if (valid) {
					/* if(this.userForm.username=='admin' 
						&& this.userForm.password=='admin'){
							this.$message("登录成功");
					}else{
						this.$message("登录失败");
					} */
					this.axios.post("http://localhost:8090/user/login",this.userForm).then(res=>{
						if(res.data.result){
							//返回用户信息
							//把用户信息缓存到本地：localStroge
							let userInfoStr = JSON.stringify(res.data.userInfo);
							window.localStorage.setItem("userInfo",userInfoStr);
							// window.localStorage.setItem("userInfo",null);
							//跳转页面到学生管理页面
							this.$router.push("/student");
						}else{
							this.$message("登录失败");
						}
					})
				  } else {
					console.log('error submit!!');
					return false;
				  }
				});
			}
			
		}
	}
</script>

<style scoped>
	.loginForm {
		width: 25%;
		margin-left: 33%;
	}
</style>